<template>
	<li class="cjy-page-body-commodity-li">
		<div>
			<div class="cjy-page-bod-commodity-box" @click='jumpEvent()'>
				<img class="nineseemoreurl" v-lazy="imgPath" :key="imgPath" />
				<span class="nineseemore">查看更多</span>
			</div>
		</div>
	</li>
</template>
<script>
	import UpdateCart from '@/real-components/UpdateCart'
	import lazyLoad from 'vue-lazyload'
	import ButtonChangeCart from '@/real-components/ButtonChangeCart/icon'
	import minxinAuto from '../mixinAuto.vue'
	import handlePathSpecial from "../../../utils/lxn/handlePathSpecial"
	export default {
		props: {
			moreseedata: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				buttonType: 2
			}
		},
		computed: {
			imgPath() {
				return this.moreseedata.publicityPicture || "../../../../static/image/demo2.png"
			}
		},
		methods: {
			jumpEvent() {
				if(this.moreseedata.extendField) {
					// var urldata = JSON.parse(this.moreseedata.extendField).url.path
					var urldata = handlePathSpecial(this.moreseedata.extendField)
					this.$router.push({
						path: urldata
					})
				}
			}
		},
		mixins: [minxinAuto],
		components: {
			UpdateCart,
			ButtonChangeCart
		},
		watch: {
			moreseedata(val) {
				console.log("moreseedata", val);
			}
		}
	}
</script>

<style scoped>
	.cjy-page-body-commodity-li {
		position: relative;
		float: left;
		width: 33.3%;
		height: 0;
		padding-bottom: 58%;
		margin-bottom: 0.5rem;
	}

	.cjy-page-body-commodity-li>div {
		position: absolute;
		width: 100%;
		height: 100%;
		padding: 0 0.1rem;
	}

	.cjy-page-bod-commodity-box {
		width: 100%;
		height: 100%;
		background: white;
		position: relative;
		border-radius: 1px;
		overflow: hidden;
		border-radius: 4px;
	}

	.cjy-page-image-box {
		width: 100%;
		height: 0;
		position: relative;
		padding-bottom: 90%;
		overflow: hidden;
	}

	.cjy-page-title-box,
	.cjy-page-lable-box,
	.cjy-page-price-box,
	.cjy-page-subtitle-box {
		padding: 0 0.3rem;
		text-align: left;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.cjy-page-title-box {
		color: #444;
		line-height: 0.8rem;
		height: 1.6rem;
		font-weight: 600;
		font-size: 0.65rem;
		word-break: break-all;
		white-space: pre-wrap;
	}

	.cjy-page-subtitle-box {
		color: #444;
		line-height: 0.8rem;
		font-weight: 600;
		font-size: 0.65rem
	}

	.cjy-page-lable-box {
		font-size: 0.6rem;
		width: 100%;
		color: #FB4F5C;
		text-line-height: 0.9rem;
		display: inline-block;
	}

	.cjy-page-lable-box>.cjy-lable {
		display: inline-block;
		border-radius: 0.3rem;
		border: 1px solid #FB4F5C;
		font-size: 0.4rem;
		color: #FB4F5C;
		padding: 0px 0.2rem;
	}

	.cjy-page-price-box {
		position: absolute;
		bottom: 0;
		width: 100%;
		font-size: 0.65rem;
		/*margin-bottom: 0.1rem;*/
		color: rgb(246, 86, 86);
	}

	.cjy-page-price-box>.cjy-price {
		font-size: 0.8rem;
		font-weight: 400;
		display: inline-block;
		line-height: 0.8rem;
	}

	.cjy-page-price-box>.cjy-price-unit {
		color: black;
	}

	.cjy-add-cart-button-box {
		height: 2rem;
		width: 2rem;
		padding: 0.5rem;
		position: absolute;
		z-index: 1;
		right: 0;
		bottom: 0;
	}
	.nineseemoreurl{
		width: 100%;
		height: 100%;
	}
	.nineseemore{
		display: inline-block;
		font-size: 1rem;
		color: #fff;
		position: absolute;
		top: 40%;
		width: 100%;
		left: 0;
	}
</style>
